<template>
	<view class="shop_pages">
		<view class="search_com">
			<!-- <search @focus="focus" placeholder='搜索你想要的东西' align='center'></search> -->
			<view class="search" @click="focus" >
				好物尽在{{name_config.name}}
			</view>
			<view class="search_btn">
				搜索
			</view>
		</view>
		<view class="list">
			<view class="left">
				<tab :list="list" :actives='active' @choseItem='choseItem'></tab>
			</view>
			<view class="right">
				<view class="sort_type">
					<scroll-view scroll-x="true" style="width: 100%;display:flex;">
						<view class="type" :class="type_active==j?'type type_active':'type'" v-for="(i,j) in typeList"
							:key='j' @click='choseType(i,j)'>
							{{i.name}}
						</view>
					</scroll-view>
				</view>
				<view class="product_list" v-if="prouctList.length > 0">
					<scroll-view scroll-y="true" style="height: 100%;" 
						@scrolltolower="flag && load()">
						<product v-for="i in prouctList" :key='i.id' :item='i'></product>
					</scroll-view>
				</view>
				<view class="nodata" v-else="prouctList.length == 0">
					暂无数据
				</view>
			</view>
		</view>
		<view class="bag" @click="toOrder">
			<image :src="IMGLink + '/shopping/bag.png'" mode=""></image>
		</view>
	</view>
</template>

<script>
	import tab from './list/tab.vue'
	import product from './list/item.vue'
	import search from './common/components/serch.vue'
	import {name_config} from '@/common/config.js' 
	import {
		goodsList,
		goodsCategoryList
	} from '../../api/shopping/shopping.js'
	export default {
		data() {
			return {
				name_config:name_config,
				searchValue: '',
				type_active: 0,
				prouctList: [],
				typeList: [],
				IMGLink: this.IMGLink,
				list: [],
				listData: {
					page: 0,
					page_size: 20,
					f_category_id: null,
					category_id: null,
					debug: 1
				},
				flag: true,
				loadFlag: true,
				active: 0
			}
		},
		components: {
			tab,
			product,
			search
		},

		methods: {
			onLoad() {
				this.goodsCategoryList();
			},
			async load() {
				this.listData.page++;
				this.listData.category_id == 0 ? this.listData.category_id = null : '';
				this.loadFlag = false;
				uni.showLoading({
					title: '加载中',
				})
				const res = await goodsList({
					...this.listData
				});
				if (res) {
					if (res.data.length == 0 && this.prouctList.length != 0) {
						this.flag = false;
					}
					this.prouctList.push(...res.data);
					this.loadFlag = true;
				} else {
					this.listData.page--;
					this.loadFlag = true;
				}
				uni.hideLoading();
				
			},
			async goodsCategoryList() {
				const res = await goodsCategoryList();
				if (res) {
					this.list = res.data.map((i) => {
						i.secondList.unshift({
							id: 0,
							name: '全部'
						})
						return i;
					})
					this.typeList = this.list[0].secondList;
					this.listData.f_category_id = this.list[0].id;
					this.listData.category_id = this.list[0].secondList[0].id;
				}
				this.load();
			},
			focus() {
				uni.navigateTo({
					url: 'search/index',
				});
			},
			choseItem(i, j) {
				if (this.loadFlag) {
					this.active = j;
					this.listData.f_category_id = i.id;
					this.type_active = 0;
					this.typeList = i.secondList;
					this.listData.category_id = i.secondList[0].id;
					this.listData.page = 0;
					this.prouctList = [];
					this.prouctList.length = 0;
					this.load();
				}
			},
			choseType(i, j) {
				if (this.loadFlag) {
					this.type_active = j;
					this.listData.category_id = i.id;
					this.listData.page = 0;
					this.prouctList = [];
					this.prouctList.length = 0;
					this.load();
				}
			},
			toOrder() {
				uni.navigateTo({
					url: '/pagesA/my/groupbuylist/grouplist',
				});
			},
			onShareAppMessage() {
				return {
					title: '拼团购',
					path: '/pages/shopping/shopping'
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.shop_pages {
		overflow: hidden;

		.search_com {
			padding: 24rpx 30rpx;
			border-bottom: 1px solid #F5F5F5;
			line-height: 64rpx;
			font-size: 28rpx;
			display: flex;
			color: #ADADAD;
			.search{
				width: 550rpx;
				line-height: 64rpx;
				position: relative;
				border-radius: 16px;
				padding: 0 20rpx;
				background: #F5F6F7;
				margin-right:30rpx;
				position: relative;
				padding-right: 30rpx;
				text-align: center;
			}
		}

		.list {
			display: flex;
			margin-top: 28rpx;

			.left {
				/* #ifndef H5 */
				width: 176rpx;
				/* #endif */
				/* #ifdef H5 */
				width: 170rpx;
				/* #endif */
			}

			.right {
				/* #ifndef H5 */
				margin-left: 12rpx;
				/* #endif */
				/* #ifdef H5 */
				margin-left: 4rpx;
				/* #endif */
				.sort_type {
					margin: 0 auto;
					width: calc(100vw - 176rpx);
					display: flex;
					white-space: nowrap;
					height: 50rpx;

					.type {
						margin-left: 20rpx;
						font-size: 24rpx;
						background: rgba(0, 0, 0, 0.04);
						line-height: 48rpx;
						text-align: center;
						border-radius: 12px;
						display: inline-block;
						white-space: nowrap;
						padding: 0 24rpx;

						&:last-child {
							margin-right: 20rpx;
						}

					}

					.type_active {
						background: rgba(245, 70, 66, 0.1);
						color: rgba(245, 70, 66, 1);
					}
				}

				.product_list {
					/* #ifndef H5 */
					height: calc(100vh - 234rpx);
					/* #endif */
					/* #ifdef H5 */
					height: calc(100vh - 428rpx);
					// height: calc(100vh - var(--window-top) - var(--window-bottom) - 28rpx - 114rpx - 50rpx - 28rpx);
					/* #endif */
					margin-top: 48rpx;
				}
			}
		}

		.bag {
			width: 100rpx;
			height: 100rpx;
			position: fixed;
			right: 26rpx;
			bottom: 500rpx;
			border-radius: 100%;

			image {
				width: 100rpx;
				height: 100rpx;
				display: block;
			}
		}

		.nodata {
			text-align: center;
			font-size: 22rpx;
			color: #CCCCCC;
			margin-top: 30rpx;
		}
	}
</style>
